<html>
<head>
<body>
<script language="JavaScript">
	var Bench=new Array(0.7,0.2,0.1);
	var TriEx=new Array(0.0,0.9,0.1);
	var pecTotal=0;
	var triTotal=0;
	var deltTotal=0;
	var benchVal=0;
	var triExVal=0;
	function updateBench(newValue) {
		document.getElementById("bench").innerHTML=newValue;
		benchVal=newValue;
		updateWO(newValue);
	}
	function updateTris(newValue) {
		document.getElementById("tris").innerHTML=newValue;
		triExVal=newValue;
		updateWO(newValue);
	}
	function updateWO(newValue) {
		pecTotal = benchVal/100*Bench[0] + triExVal/100*TriEx[0];
		triTotal = benchVal/100*Bench[1] + triExVal/100*TriEx[1];
		deltTotal = benchVal/100*Bench[2] + triExVal/100*TriEx[2];
		updateSVG();
	}
	function updateSVG() {
		pec.setAttribute("fill-opacity", pecTotal);
		tri.setAttribute("fill-opacity", triTotal);
		delt.setAttribute("fill-opacity", deltTotal);
	}

</script>

<!--
Pec Weight
<input id="pecWeight" type="text" value="0.7"/>
Delt Weight
<input id="deltWeight" type="text" value="0.3"/>
<br>-->

Bench Press
<input type="range" min="0" max="100" value="0"  onchange="updateBench(this.value)" />
<span id="bench">0</span>
<br>
Tricep Extension
<input type="range" min="0" max="100" value="0"  onchange="updateTris(this.value)" />
<span id="tris">0</span>
<br>

<br>Pecs<br>
<!--
<input type="button" value="Click to Change" onclick="colortime();"/>-->

<svg height="200" width="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path id="pec" d="M30,110 C30,110 5,55 30,10 L50,10 C50,10 75,55 50,110 Z" stroke="black" stroke-width="1" fill="#F62217" fill-opacity="0" />
</svg>

<br>Triceps<br>
<svg height="200" width="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle id="tri" cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="#F62217" fill-opacity="0"/>
</svg>

<br>Delts<br>
<svg height="200" width="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle id="delt" cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="#F62217" fill-opacity="0"/>
</svg>

</body>
</html>